<template>
  <div>
    <el-form ref="form" :model="form" label-width="115px" style="margin-top: 5px;margin-bottom: 10px;">
      <el-alert
          center
          style="margin-bottom: 5px;"
          type="info">
        <template #title>
          上舰贺报上线，皮肤限时免费使用！上线测试阶段，有问题请
          <el-link href="https://message.bilibili.com/#/whisper/mid10983855" style="font-size: 13px" target="_blank"
                   type="info">
            反馈开发
          </el-link>
        </template>
      </el-alert>
      <el-card :body-style="{ padding: '10px' }" class="box-card">
        <div class="preview-zone">
          <el-image fit="contain"
                    src="https://i1.xuehusang.cn/openlivechat-css/image/demo-background.jpg"
                    style="display: flex;"></el-image>
          <div :style="{ backgroundColor: `rgba(0,0,0,${form.maskOpacity / 100}`}" class="overlay-mask"></div>
          <el-image class="preview-webp" fit="contain"
                    src="https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_preview.webp"></el-image>
        </div>
        <el-collapse>
          <el-collapse-item>
            <template slot="title">
              当前皮肤
              <el-tag size="small" style="margin-left: 10px;">默认</el-tag>
            </template>
            <el-button size="small">{{ pickedSkin.name }}</el-button>
            <el-button disabled size="small">更多皮肤敬请期待</el-button>
          </el-collapse-item>
        </el-collapse>
        <el-row :gutter="20" style="margin-top: 10px;">
          <el-col :sm="6" :xs="12" style="height: 40px;">
            <el-form-item>
              <template slot="label">
                背景暗化程度
                <el-tooltip :enterable="false" placement="top">
                  <div slot="content">
                    当触发上舰特效时，直播间整体变暗一定程度以优化观感<br/>
                    默认为10%，<strong>0%时完全不暗化后景，100%时后景全黑</strong>
                  </div>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </template>
              <el-slider
                  v-model="form.maskOpacity"
                  :format-tooltip="formatTooltip"
                  :step="10"
              >
              </el-slider>
            </el-form-item>
          </el-col>
          <el-col :sm="6" :xs="12" style="height: 40px;">
            <el-form-item>
              <template slot="label">
                弹出动画延时
                <el-tooltip :enterable="false" placement="top">
                  <div slot="content">
                    从接收上舰数据到动画弹出中间可增加的延时<br/>
                    默认为0秒，即有人上舰立刻触发动画
                  </div>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </template>
              <el-slider
                  v-model="form.delayTime"
                  :format-tooltip="formatTooltip2"
                  :max="60"
                  :min="0"
                  style="width: 160px;"
              >
              </el-slider>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card :body-style="{border: '2px solid #409EFF' }">
      <el-form :model="form" label-width="80px">
        <el-popover
            v-model="tips_visible"
            :content="$t('home.settingsChangeTipsContent')"
            :title="$t('home.settingsChangeTipsTitle')"
            placement="left"
            trigger="manual"
            width="160">
          <el-form-item slot="reference" style="margin-bottom: 0;">
            <template slot="label">
              <strong>贺报URL</strong>
            </template>
            <el-input ref="roomUrlInput" :value="pluginsUrl" readonly
                      style="width: calc(100% - 6em); margin-right: 0.6em;"></el-input>
            <el-button type="primary" @click="copyUrl">{{
                $t('home.copy')
              }}
            </el-button>
          </el-form-item>
        </el-popover>
        <el-form-item style="margin-top: 10px;margin-bottom: 0;">
          <el-button @click="copyUrl2">
            {{ $t('home.copyTestUrl') }}
            <el-tooltip :enterable="false" placement="top">
              <div slot="content">
                该地址可预览全屏上舰贺报的效果<br/>
                测试地址暂不支持显示已购皮肤
              </div>
              <i class="el-icon-info"></i>
            </el-tooltip>
          </el-button>
          <el-button @click="openUrl">
            图文教程
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

import * as chatConfig from "@/api/chatConfig";
import _ from "lodash";

export default {
  name: 'CaptainFx',
  data() {
    return {
      form: {
        maskOpacity: 10,
        delayTime: 0,
        ...chatConfig.getLocalConfig()
      },
      skinList: [
        {
          "name": "默认",
          "id": 'default',
          "preview_webp": "https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_preview.webp"
        }
      ],
      pickedSkin: {
        "name": "默认",
        "id": 'default',
        "preview_webp": "https://i1.xuehusang.cn/openlivechat-css/fullScreenCele/default_preview.webp"
      },
      user_data: {},
      tips_visible: false,
    }
  },
  mounted() {

  },
  watch: {
    pluginsUrl: _.debounce(function () {
      window.localStorage.roomId = this.form.roomId
      let real_form = this.form
      this.popoverTipsCountdown()
      chatConfig.setLocalConfig(real_form)
    }, 500)
  },
  computed: {
    pluginsUrl() {
      const queryParams = `?Code=${this.form.Code}&Mid=${this.form.Mid}&Timestamp=${this.form.Timestamp}&CodeSign=${this.form.CodeSign}&MaskOpacity=${this.form.maskOpacity}&DelayTime=${this.form.delayTime}&skin=${this.pickedSkin.id}`
      return `https://openlivechat.xuehusang.cn/fullScreenCele/open-live${queryParams}`
    }
  },
  methods: {
    formatTooltip(val) {
      return val + "%";
    },
    formatTooltip2(val) {
      return val + "秒";
    },
    popoverTipsCountdown() {
      if (this.tips_visible === false) {
        this.tips_visible = true
        setTimeout(() => {
          this.tips_visible = false
        }, 4000)
      }
    },
    copyUrl() {
      this.$refs.roomUrlInput.select()
      document.execCommand('Copy')
    },
    copyUrl2() {
      const oInput = document.createElement('input');
      document.body.appendChild(oInput)
      oInput.value = `https://openlivechat.xuehusang.cn/fullScreenCele/test?MaskOpacity=${this.form.maskOpacity}&DelayTime=${this.form.delayTime}&skin=${this.pickedSkin.id}`
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand('Copy');
      document.body.removeChild(oInput)
    },
    openUrl() {
      window.open('https://kdocs.cn/l/cdiX2aRQuVdF', '_blank')
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
}

.preview-zone {
  position: relative;
  display: inline-block;
}

.preview-webp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

</style>